
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" href="css/vegas.min.css">
    <link rel="stylesheet" media="screen" href="css/jquery-ui.min.css">
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vegas.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div id="all">
    <header>
        <nav>
            <ul id="navigation">
                <li><a href="#home">主页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#photography">摄影</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <div id="home">
        <div id="logo">
            <img alt="Company Logo" src="img/logo.png"/>
            <h2><em>公司名称</em></h2>
            <p>途牛旅游网</p>
            <br>
            <a href="#about">了解更多</a>
        </div>
    </div>
    <div id="about">
        <h2>关于我们</h2>
        <p>
            途牛旅游网于2006年10月创立于南京，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳、南京等64个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。
        </p>
        <p>
            途牛旅游网提供8万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400万人次出游。
        </p>
        <p>
            2014年12月15日，途牛旅游网宣布与弘毅投资、京东商城、携程旗下子公司“携程投资”以及途牛首席执行官与首席运营官签订股权认购协议。根据协议，途牛将向上述投资者出售1.48亿美元的新发行股份。
        </p>
        <p>
            2015年11月24日，途牛旅游网与海航旅游集团共同宣布战略结盟。海航旅游战略投资途牛5亿美元，双方将利用各自优质资源，在线上旅游、航空、酒店服务等领域开展深度合作。
        </p>
        <p>
            易观报告显示，2015年第3季度，途牛交易规模达到46.5亿元人民币，同比增长141.1%。这已是途牛连续三个季度同比增速超过三位数：2015年第二季度时，途牛交易规模同比增长135.3%；第一季度，这一数据为122.8%。从增速来看，途牛再度蝉联行业第一。
        </p>
    </div>
    <hr/>
    <div id="services">
        <h2>我们的服务</h2>
        <ul>
            <li>
                <h3>量身定制</h3>
                <p>专业旅游顾问团，丰富的产品线。更有专业的摄影师，全程为你拍照留念。</p>
            </li>
            <li>
                <h3>性价比高</h3>
                <p>同类产品选择途牛更实惠，近百位专业的旅游顾问帮您筛选出市场上性价比最高的旅游产品。</p>
            </li>
            <li>
                <h3>双重保障</h3>
                <p>售中、售后跟踪服务以及质检，旅途中出现任何质量问题我们帮您维权到底，使您的权益得到切实保障，选择我们您的出游便有了双重保障。</p>
            </li>
        </ul>
    </div>
    <hr/>
    <div id="photography">
        <h2>摄影师的作品</h2>
        <span id="landscape">山水</span>
        <span id="character">人物</span>
        <span id="plant">植物</span>
        <ul>
            <li><img src="img/landscape1.jpg" id="img1"></li>
            <li> <img src="img/landscape2.jpg" id="img2"></li>
            <li> <img src="img/landscape3.jpg" id="img3"></li>
            <li> <img src="img/landscape4.jpg" id="img4"></li>
            <li> <img src="img/landscape5.jpg" id="img5"></li>
            <li> <img src="img/landscape6.jpg" id="img6"></li>
        </ul>
    </div>
    <hr/>
    <div id="contact">
        <form class="cmxform" id="commentForm" method="get" action="">
            <fieldset class="ui-widget ui-widget-content ui-corner-all">
                <legend class="ui-widget ui-widget-header ui-corner-all">联系我们</legend>
                <p id="p">
                    <label for="cname">姓名</label>
                    <input id="cname" name="name" class="ui-widget-content" minlength="2" required type="text" placeholder="请输入姓名">
                <p>
                    <label for="cemail">邮箱</label>
                    <input id="cemail" name="email" class="ui-widget-content" type="email" required placeholder="请输入邮箱地址">
                </p>
                <p>
                    <label for="ccomment">留言</label>
                    <textarea id="ccomment" name="comment" class="ui-widget-content" required placeholder="请输入你的留言"></textarea>
                </p>
                <p>
                    <button class="submit" type="submit">提交</button>
                </p>
            </fieldset>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        //背景图
        $('#home').vegas({
            slides: [
                { src: 'img/bg1.jpg' },
                { src: 'img/bg2.jpg' },
                { src: 'img/bg3.jpg' },
                { src: 'img/bg4.jpg' }
            ]
        });
        //摄影师作品
        $("#landscape").click(function(){
            $("#landscape").css({background:"#3071a9"});
            $("#character").css({background:"#999"});
            $("#plant").css({background:"#999"});
            $("#img1").attr("src","img/landscape1.jpg");
            $("#img2").attr("src","img/landscape2.jpg");
            $("#img3").attr("src","img/landscape3.jpg");
            $("#img4").attr("src","img/landscape4.jpg");
            $("#img5").attr("src","img/landscape5.jpg");
            $("#img6").attr("src","img/landscape6.jpg");
        });
        $("#character").click(function(){
            $("#landscape").css({background:"#999"});
            $("#character").css({background:"#3071a9"});
            $("#plant").css({background:"#999"});
            $("#img1").attr("src","img/character1.jpg");
            $("#img2").attr("src","img/character2.jpg");
            $("#img3").attr("src","img/character3.jpg");
            $("#img4").attr("src","img/character4.jpg");
            $("#img5").attr("src","img/character5.jpg");
            $("#img6").attr("src","img/character6.jpg");
        });
        $("#plant").click(function(){
            $("#landscape").css({background:"#999"});
            $("#character").css({background:"#999"});
            $("#plant").css({background:"#3071a9"});
            $("#img1").attr("src","img/plant1.jpg");
            $("#img2").attr("src","img/plant2.jpg");
            $("#img3").attr("src","img/plant3.jpg");
            $("#img4").attr("src","img/plant4.jpg");
            $("#img5").attr("src","img/plant5.jpg");
            $("#img6").attr("src","img/plant6.jpg");
        });
    });
    //联系我们
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        },
        showErrors: function(map, list) {
            // there's probably a way to simplify this
            var focussed = document.activeElement;
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("close", {
                    currentTarget: focussed
                }, true)
            }
            this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
            $.each(list, function(index, error) {
                $(error.element).attr("title", error.message).addClass("ui-state-highlight");
            });
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("open", {
                    target: focussed
                });
            }
        }
    });

    (function() {
        // use custom tooltip; disable animations for now to work around lack of refresh method on tooltip
        $("#commentForm, #signupForm").tooltip({
            show: false,
            hide: false
        });

        // validate the comment form when it is submitted
        $("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });

        //code to hide topic selection, disable for demo
        var newsletter = $("#newsletter");
        // newsletter topics are optional, hide at first
        var inital = newsletter.is(":checked");
        var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
        var topicInputs = topics.find("input").attr("disabled", !inital);
        // show when newsletter is checked
        newsletter.click(function() {
            topics[this.checked ? "removeClass" : "addClass"]("gray");
            topicInputs.attr("disabled", !this.checked);
        });

        $("#signupForm input:not(:submit)").addClass("ui-widget-content");

        $(":submit").button();
    })();
</script>
</html>